<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    body, div {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .blue {
      width: 300px;
      height: 300px;
      background-color: blue;
    }
    .green {
      width: 200px;
      height: 200px;
      background-color: green;
    }
    .red {
      width: 100px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="blue">
    <div class="green">
      <div class="red"></div>
    </div>
  </div>
</body>
</html>

<script>
const divs = document.querySelectorAll('div');
const blue = divs[0];
const green = divs[1];
const red = divs[2];

// 事件冒泡：
  // 我点击一个 DOM，事件的触发： 从 点击的这个 DOM 开始，依次往上走(DOM树的节点关系)，直到最外层 （window）

// 事件捕获：
  // 我点击一个 DOM，事件的触发： 从 最外层 （window）->  依次往下走(DOM树的节点关系)，直到 点击的这个 DOM 元素

green.addEventListener('click', (e) => {
    e.stopPropagation()
    console.log('green');
});

window.addEventListener('click', e => {
    e.stopPropagation()
    console.log('window');
});

red.addEventListener('click', (e) => {
    e.stopPropagation()
    console.log('red');
});

document.addEventListener('mousedown', e => {
    e.stopPropagation()
    console.log('document');
});

blue.addEventListener('click', (e) => {
    e.stopPropagation()
    console.log('blue');
});





</script>
